<template>
  <el-menu
    :default-active="activeIndex2"
    mode="horizontal"
    @select="handleSelect"
    background-color="#545c64"
    text-color="#fff"
    active-text-color="#ffd04b"
    :router="true">
    <el-menu-item index="/market">图书商店</el-menu-item>
    <el-menu-item index="/market/cart">购物车</el-menu-item>
    <el-menu-item v-if="auth.id" index="/custom/order">历史订单</el-menu-item>
    <el-submenu index="3" v-if="auth.admin">
      <template slot="title">管理中心</template>
      <el-menu-item index="/admin/stock">库存管理</el-menu-item>
      <el-menu-item index="/admin/users">用户管理</el-menu-item>
      <el-menu-item index="/admin/order">订单记录</el-menu-item>
      <el-menu-item index="/admin/sales">销售记录</el-menu-item>
    </el-submenu>
    <el-menu-item v-if="auth.name" index="/custom/profile" class="right">{{ auth.name }} {{ auth.admin ? '管理员' : '用户' }}</el-menu-item>
    <el-menu-item v-else-if="auth.id" index="/auth/enroll/profile" class="right">您尚未设定用户名</el-menu-item>
    <el-menu-item v-else index="/auth/login" class="right">登录</el-menu-item>
  </el-menu>
</template>

<script>
import { checkAuth } from '@/utils/checkAuth'

export default {
  name: 'cl-nav',
  data () {
    return {
      activeIndex2: '',
      auth: {
        id: null,
        name: null,
        admin: false
      }
    }
  },
  methods: {
    handleSelect () {

    }
  },
  created () {
    checkAuth().then(auth => {
      if (auth) {
        this.auth = auth
      }
    })
  }
}
</script>

<style lang="scss" scoped>
.right {
  float: right;
}
</style>
